// In three.js, we need 3 "things" : a scene, a camera and a renderer

var camera, scene, renderer;
// var controls;
var geometry, material, mesh;

function webGL(){
  // Create a scene
  scene = new THREE.Scene();
  scene.background = 0x00ff00;

  // Create a camera 
  camera = new THREE.PerspectiveCamera(45 , window.innerWidth/window.innerHeight, 0.1, 1000 );

  // Set camera position. By default, objects are add at (0,0,0); center of the map.
  camera.position.z = 50;

  /* Controls */
  controls = new THREE.OrbitControls( camera );
  controls.addEventListener( 'change', render );

  // Create a renderer 
  renderer = new THREE.WebGLRenderer(); 

  // Size of the renderer
  renderer.setSize( window.innerWidth, window.innerHeight );

  // Append the renderer to the html page
  document.body.appendChild( renderer.domElement );

  
  /******* Creating objects *************/

  meshMaterial = new THREE.MeshBasicMaterial({ color: 0xFF00FF, wireframe: true });

  var cube = new THREE.Mesh( new THREE.CubeGeometry( 5, 5, 5 ), meshMaterial );
  cube.position.set( 25, 25, 25 );
  scene.add( cube );

  var sphere = new THREE.Mesh( new THREE.SphereGeometry( 5 ), meshMaterial );
  sphere.position.set( -25, 25, 25 );
  scene.add( sphere );

  var icosahedron = new THREE.Mesh( new THREE.IcosahedronGeometry( 5 ), meshMaterial );
  icosahedron.position.set( 25, 25, -25 );
  scene.add( icosahedron );

  var torus = new THREE.Mesh( new THREE.TorusGeometry( 5, 3 ), meshMaterial );
  torus.position.set( -25, 25, -25 );
  scene.add( torus );

  var cylinder = new THREE.Mesh( new THREE.CylinderGeometry( 5, 5, 5 ), meshMaterial );
  cylinder.position.set( 25, -25, 25 );
  scene.add( cylinder );

  var circle = new THREE.Mesh( new THREE.CircleGeometry( 5 ), meshMaterial );
  circle.position.set( -25, -25, 25 );
  scene.add( circle );

  var octahedron = new THREE.Mesh( new THREE.OctahedronGeometry( 5 ), meshMaterial );
  octahedron.position.set( 25, -25, -25 );
  scene.add( octahedron );

  var torusKnot = new THREE.Mesh( new THREE.TorusKnotGeometry( 5, 1 ), meshMaterial );
  torusKnot.position.set( -25, -25, -25 );
  scene.add( torusKnot );
  


var axisHelper = new THREE.AxisHelper( 50 ); 
scene.add( axisHelper );
  

  // Render loop 60 times per seconds
  var render = function () { 
    // loop
    requestAnimationFrame( render );

    // Render the Scene
    renderer.render(scene, camera);
    
    // Controls
    controls.update();

  };

  window.addEventListener( 'resize', onWindowResize, false );

var onWindowResize = function(){
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize( window.innerWidth, window.innerHeight );

  render();
} ;

  // Call the renderer
  render();
}


function rotate(object){
  var rotInt = document.getElementById("rotRange");

  object.rotation.x += rotInt.value/500;
  object.rotation.y += rotInt.value/500;
}

function translate(object){
  
  if(object.position.x > 4){
    object.transDir = "left";
  }
  if(object.position.x < -4){
    object.transDir = "right";
  }

  if(object.transDir == "left"){
    object.translateX(-0.01);
  } else {
    object.translateX(0.01);
  }
}

function changeColor(object){
  
  var colorPicker = document.getElementById("colorPicker");
  object.material.color.setHex(colorPicker.value.replace('#','0x'));
}
